| Vue项目webpack打包报错：Module not found: Error: Can't resolve './src/todoItem' | 您所在的位置：网站首页 › module not found vue › Vue项目webpack打包报错：Module not found: Error: Can't resolve './src/todoItem' |
|
问题描述
今天在学习vue单文件组件的打包，在运行 npm run build 打包出现报错。 ERROR in ./components/todoItem/index.js Module not found: Error: Can't resolve './src/todoItem' in '*******' @ ./components/todoItem/index.js 1:0-38 3:15-23 @ ./main.js 复制代码组件目录 components └── todoItem ├── index.js └── src └── todoItem.vue 复制代码components/todoItem/index.js import todoItem from './src/todoItem'; export default todoItem; 复制代码package.json { "name": "vue_without_teamplate", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js", "dev": "webpack-dev-server --open " }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.0.2", "vue-loader": "^15.9.1", "vue-template-compiler": "^2.6.11", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3" } } 复制代码webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: "development", entry: { app: './main.js' }, output: { path: path.join(__dirname, './dist'), filename: '[name].bundle.js' }, devServer: { contentBase: './dist', hot: true }, module: { rules: [ // ... 其它规则 { test: /\.vue$/, loader: 'vue-loader' }, // 它会应用到普通的 `.js` 文件 // 以及 `.vue` 文件中的 `` 块 { test: /\.js$/, loader: 'babel-loader' }, ] }, plugins: [ new HtmlWebpackPlugin({ title: 'Output Management', filename: 'index.html', template: './index.html' }), new CleanWebpackPlugin(), // 请确保引入这个插件！ new VueLoaderPlugin() ], resolve: { alias: { 'vue$': 'vue/dist/vue.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js' }, } } 复制代码原因问题的根源是在导入组件时没有指定文件扩展名。真是惭愧😥，使用脚手架构建项目，组件导入的时候都是不用拓展名的，却又没有深究为什么可以不适用拓展名。因为脚手架生成的配置文件中有对模块文件的扩展名的相关配置： module.exports = { //... resolve: { // 以下配置会将没指定拓展名的文件按如下类型查找匹配 extensions: [ //... '.js', '.json','.vue' ] } }; 复制代码解决方案 在导入文件的时候指定拓展名components/todoItem/index.js - import todoItem from './src/todoItem'; + import todoItem from './src/todoItem.vue'; export default todoItem; 复制代码 在webpack配置文件中配置webpack.config.js module.exports = { //... resolve: { alias: { 'vue$': 'vue/dist/vue.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js' }, + extensions: ['*', '.js', '.vue'] } }; 复制代码 |
| CopyRight 2018-2019 实验室设备网 版权所有 |